<script>
$(document).ready(function(){
//Initialize all components.
var type=$('#ServiceTemplateForm #TypeContainer').buttonset();
var billable=$('#ServiceTemplateForm #BillableContainer').buttonset();
var repeat=$('#ServiceTemplateForm #RepeatContainer').buttonset();
var until=$('#ServiceTemplateForm #Until').datepicker({dateFormat:'MM dd, yy'});
var dueDate=$('#ServiceTemplateForm #DueDate').datepicker({dateFormat:'MM dd, yy'});
var times=$('#ServiceTemplateForm #Times').spinner({min:1,max:99999});
// Initialize all Dialogs and hide them.
var serviceTemplateDialog=$('#ServiceTemplateDialog').dialog({
	autoOpen:false,
	title:"Service",
	modal:true,
	resizable:false,
	width:1260,
	height:600,
	buttons:{
		"Save":function(){
			var service={
				"clientId":($('#clientId')!=undefined?$('#clientId').val():''),
				"clientName":($('#clientName')!=undefined?$('#clientName').val():''),
				"Fee":($('#ServiceTemplateForm #Fee')!=undefined?$('#ServiceTemplateForm #Fee').val():''),
				"Type":$('#ServiceTemplateForm #TypeContainer :radio:checked').val(),
				"Billable":($('#ServiceTemplateForm #Billable').attr('checked')=='checked'?true:false),
				"DueDate":($('#ServiceTemplateForm #DueDate').datepicker('getDate')!=undefined?$('#ServiceTemplateForm #DueDate').datepicker('getDate').getTime():''),
				"Times":$('#ServiceTemplateForm #Times').val(),
				"Until":($('#ServiceTemplateForm #Until').datepicker('getDate')!=undefined?$('#ServiceTemplateForm #Until').datepicker('getDate').getTime():''),
				"Repeat":$('#ServiceTemplateForm #RepeatContainer :radio:checked').val(),
				"Accountant":$('#ServiceTemplateForm #AccountantContainer :radio:checked').val(),
				"Note":($('#ServiceTemplateForm #Note').val())
			};
			var hasError=false;
			// Validation on required fields.
			$('#ServiceTemplateForm .RequiredField').each(function(){
				var field=$('#ServiceTemplateForm #'+$(this).attr('for'));
				$('#ServiceTemplateForm #'+field.attr('id')+'Message').empty();
				if(field.attr('id')=='TypeContainer'){
					if($('#ServiceTemplateForm #TypeContainer :radio:checked').val()===undefined){
						hasError=true;
						$('#ServiceTemplateForm #'+field.attr('id')+'Message').append('Required');
					}
				}else if(field.attr('id')=='AccountantContainer'){
					if($('#ServiceTemplateForm #AccountantContainer :radio:checked').val()===undefined){
						hasError=true;
						$('#ServiceTemplateForm #'+field.attr('id')+'Message').append('Required');
					}
				}else{
					var value=field.val();
					if(value===undefined||value==''){
						$('#ServiceTemplateForm #'+field.attr('id')+'Message').append('Required');
						hasError=true;
					}else{
						$('#ServiceTemplateForm #'+field.attr('id')+'Message').empty();
					}
				}
			});
			if(!hasError){
				$.ajax({
					url:"/AjaxSaveClientServices",
					type:"POST",
					dataType:"json",
					data:service,
					success:function(data,status,xhr){
						// After saving successfully, redirect back to client's services.
						if(data.success==true){
							window.location.href='/services.jsp?clientId='+data.clientId+'&clientName='+data.clientName;
						}else{
							window.location.href='/client.jsp?clientId='+data.clientId;
						}
					},
					error:function(xhr,status,error){
						alert("error:"+error);
					}
				});
			}
		},
		Cancel:function(){
			$(this).dialog("close");
		}
	},
	open:function(){
		$.ajax({
			url:'/AjaxGetUsers',
			type:'GET',
			dataType:'json',
			success:function(data,status,xhr){
				var accountantContainer=$('#ServiceTemplateForm #AccountantContainer').empty();
				var users=data.data;
				var currentUserId='<%=((String)request.getAttribute("CurrentUserId"))%>';
				for(var i=0;i<users.length;i++){
					if(users[i].UserId==currentUserId){
						accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'" checked="checked"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
					}else{
						accountantContainer.append('<input id="'+users[i].UserId+'" name="Accountant" type="radio" value="'+users[i].UserId+'"/><label for="'+users[i].UserId+'">'+users[i].Nickname+'</label>');
					}
				}
				accountantContainer.buttonset();
			},
			error:function(xhr,status,error){
				alert('Error:'+error);
			}
		});
	},
	close:function(){
		// Clear all fields and reset defaults for radios.
		$('#ServiceTemplateForm :input[type="text"],textarea').val('');
	}
	});
});
</script>
<div id="ServiceTemplateDialog">
<form id="ServiceTemplateForm">
<table>
	<tr>
		<td><label id="TypeLabel" for="TypeContainer" class="RequiredField">Service Type:</label></td><td>
			<div id="TypeContainer" style="float:left;">
				<input id="PayrollRemittance" name="Type" type="radio" value="PayrollRemittance"/><label for="PayrollRemittance">Payroll Remittance</label>
				<input id="PayrollPrintPayCheque" name="Type" type="radio" value="PayrollPrintPayCheque"/><label for="PayrollPrintPayCheque">Payroll Print Pay Cheque</label>
				<input id="HSTReturn" name="Type" type="radio" value="HSTReturn"/><label for="HSTReturn">HST Return</label>
				<input id="WSIBReturn" name="Type" type="radio" value="WSIBReturn"/><label for="WSIBReturn">WSIB Return</label>
				<input id="EHTReturn" name="Type" type="radio" value="EHTReturn"/><label for="EHTReturn">EHT Return</label>
				<input id="MonthlyBookkeeping" name="Type" type="radio" value="MonthlyBookkeeping"/><label for="MonthlyBookkeeping">Monthly Bookkeeping</label>
				<input id="QuarterlyBookkeeping" name="Type" type="radio" value="QuarterlyBookkeeping"/><label for="QuarterlyBookkeeping">Quarterly Bookkeeping</label>
				<input id="CorporateTaxReturn" name="Type" type="radio" value="CorporateTaxReturn"/><label for="CorporateTaxReturn">Corporate Tax Return</label>
				<input id="YearEndService" name="Type" type="radio" value="YearEndService"/><label for="YearEndService">Year End Service</label>
				<input id="T4Return" name="Type" type="radio" value="T4Return"/><label for="T4Return">T4 Return</label>
				<input id="T4AReturn" name="Type" type="radio" value="T4AReturn"/><label for="T4AReturn">T4A Return</label>
				<input id="T5Return" name="Type" type="radio" value="T5Return"/><label for="T5Return">T5 Return</label>
				<input id="ROE" name="Type" type="radio" value="ROE"/><label for="ROE">ROE</label>
				<input id="AccruedBonus" name="Type" type="radio" value="AccruedBonus"/><label for="AccruedBonus">Accrued Bonus</label>
				<input id="InterimFS" name="Type" type="radio" value="InterimFS"/><label for="InterimFS">Interim F/S</label>
				<input id="ReviewEngagement" name="Type" type="radio" value="ReviewEngagement"/><label for="ReviewEngagement">Review Engagement</label>
				<input id="Dissolution" name="Type" type="radio" value="Dissolution"/><label for="Dissolution">Dissolution</label>
				<input id="CXLBusinessNumber" name="Type" type="radio" value="CXLBusinessNumber"/><label for="CXLBusinessNumber">CXL Business Number</label>
				<input id="CXLWSIB" name="Type" type="radio" value="CXLWSIB"/><label for="CXLWSIB">CXL WSIB</label>
				<input id="CXLEHT" name="Type" type="radio" value="CXLEHT"/><label for="CXLEHT">CXL EHT</label>
				<input id="FinalT4" name="Type" type="radio" value="FinalT4"/><label for="FinalT4">Final T4</label>
				<input id="Others" name="Type" type="radio" value="Others"/><label for="Others">Others</label>
				<input id="PickupDelivery" name="Type" type="radio" value="PickupDelivery"/><label for="PickupDelivery">Pickup Delivery</label>
			</div>
			<label id="TypeContainerMessage" class="Message" for="TypeContainer"></label>
			</td>
	</tr>
	<tr>
		<div id="BillableContainer" style="float:left;">		
		<td><label for="Fee">Fee: $</label></td><td><input id="Fee" name="Fee" type="text" maxlength="200" size="15"/>  <span id="BillableContainer"><input id="Billable" name="Billable" type="checkbox" checked="checked"/><label for="Billable">Billable</label></span></td>
	</tr>
	<tr>
		<td><label id="DueDateLabel" for="DueDate" class="RequiredField">Due Date:</label></td><td><input id="DueDate" name="DueDate" type="text"/><label id="DueDateMessage" class="Message" for="DueDate"></label></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>
			<div id="RepeatContainer">
				<input id="Monthly" name="Repeat" type="radio" value="Monthly"/><label for="Monthly">Monthly</label>
				<input id="Quarterly" name="Repeat" type="radio" value="Quarterly"/><label for="Quarterly">Quarterly</label>
				<input id="Annually" name="Repeat" type="radio" value="Annually"/><label for="Annually">Annually</label>
			</div>
			<div id="UntilContainer" style="padding:3px">
				<label for="Until">Until: </label><input id="Until" name="Until" type="text"/>
			</div>
			<div id="TimesContainer" style="padding:3px">
				<label for="Times">Number of Times: </label><input id="Times" name="Times" type="text"/>
			</div>
		</td>
	</tr>
	<tr>
		<td><label for="AccountantContainer" id="AccountantLabel" class="RequiredField">Accountant:</label></td><td><div id="AccountantContainer"></div><label id="AccountantContainerMessage" class="Message" for="AccountantContainer"></label></td>
	</tr>
	<tr>
		<td>Note:</td><td colspan="5"><textarea id="Note" name="Note" rows="5" cols="60"></textarea></td>
	</tr>
</table>
</form>
</div>